<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width initial-scale=1" />
    <link
      rel="apple-touch-icon"
      sizes="57x57"
      href="./icons/apple-icon-57x57.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="60x60"
      href="./icons/apple-icon-60x60.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="72x72"
      href="./icons/apple-icon-72x72.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="76x76"
      href="./icons/apple-icon-76x76.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="114x114"
      href="./icons/apple-icon-114x114.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="120x120"
      href="./icons/apple-icon-120x120.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="144x144"
      href="./icons/apple-icon-144x144.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="152x152"
      href="./icons/apple-icon-152x152.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="./icons/apple-icon-180x180.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="192x192"
      href="./icons/android-icon-192x192.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./icons/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="96x96"
      href="./icons/favicon-96x96.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="./icons/favicon-16x16.png"
    />
    <link rel="manifest" href="./manifest.json" />
    <meta name="msapplication-TileColor" content="#E6E6FA" />
    <meta
      name="msapplication-TileImage"
      content="./icons/ms-icon-144x144.png"
    />
    <meta name="theme-color" content="#E6E6FA" />

    <script>
      if ("serviceWorker" in navigator) {
        window.addEventListener("load", function() {
          navigator.serviceWorker.register("./sw.js").then(
            function(registration) {
              // Registration was successful
              console.log(
                "ServiceWorker registration successful with scope: ",
                registration.scope
              );
            },
            function(err) {
              // registration failed :(
              console.log("ServiceWorker registration failed: ", err);
            }
          );
        });
      }
    </script>

    <title>小皮咖 pwa 实例</title>
    <link rel="stylesheet" href="./sw/assets/css/style1.css" />
  </head>

  <body>
    <div class="container">
      <div class="box">
        <div id="app"></div>
        <h1>小皮咖 pwa 实例11</h1>
        <br />
        <p>
          Web Community Leads UK and IE is a network of people who run meet up
          groups or similar events focused around web technologies. <br />It
          exists to help event organisers to share resources and ask for advice
          when needed.
        </p>

        <h3>图片缓存测试</h3>
        <img src="./sw/assets/img/1_img.png" alt="" />
        <img src="./sw/assets/img/2_img.png" alt="" />
        <img src="./sw/assets/img/3_img.png" alt="" />
        <img src="./sw/assets/img/5_img.png" alt="" />
        <img src="./sw/assets/img/2560 1440 b.png" alt="" />
        <img src="./sw/assets/img/news_banner_img.png" alt="" />
        <img src="./sw/assets/img/WeChat Image_201807121619171.jpg" alt="" />

        <footer>
          <a href="https://github.com/zxpsuper/Demo">Code on GitHub</a>
          <a href="http://zxpsuper.github.io">My blog</a>
          <a href="https://zxpsuper.github.io/Demo/advanced_front_end/"
            >My Book</a
          >
        </footer>
      </div>
    </div>
    <script>
      //创建异步对象
      var xhr = new XMLHttpRequest();
      //设置请求的类型及url
      //post请求一定要添加请求头才行不然会报错
      xhr.open("post", "https://test-api.layuva.com/gateway");
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      //发送请求
      xhr.send("method=order.test&_app-key=MjIyMg==");
      xhr.onreadystatechange = function() {
        // 这步为判断服务器是否正确响应
        if (xhr.readyState == 4 && xhr.status == 200) {
          console.log(JSON.parse(xhr.responseText));
          document.getElementById("app").innerHTML = JSON.parse(
            xhr.responseText
          ).data.time;
        }
      };
    </script>
  </body>
</html>
